	<template>
		<view class="index-tab1-view">
			<view class="index-bg-color"></view>
			<view class="index-content">

				<!-- 轮播 -->
				<view class="fx-content-end swiper-box" v-if="bannerList.length>0">
					<swiper class="index-swiper" :autoplay="true" circular :interval="5000" @change="changeSwiper"
						:duration="1000">
						<swiper-item v-for="item in bannerList" :key="item.id">
							<image :src="item.url" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
					<view class="swiper-radius">
						<block v-for="(item, index) in bannerList" :key="index">
							<view :class="{ dot_select: swiperSelect === index }"></view>
						</block>
					</view>
				</view>
				<!-- 广告 -->
				<view class="advertise-box fx-center-between">
					<view class="advertise-item">
						<image src="/static/rank.png" mode="heightFix"></image>
						<view class="item-text">
							<view class="month">{{rank_month}} {{rank_year}}</view>
							<view class="rank-list">
								<view class="rank-item fx-center-between" v-for="(item,index) in rankList" :key="index"
									v-if="rankList.length>0">
									<view class="left-name">
										<text>0{{index+1}}</text>{{item.name}}
									</view>
									<view class="">
										¥{{item.rmb}}
									</view>
								</view>
								<view class="rank-no-item" v-else>暂无数据</view>
							</view>
						</view>
					</view>
					<view class="advertise-item">
						<image src="/static/zhinan.png" mode="heightFix" @click="toZhiNan"></image>
					</view>
				</view>
				<!-- 加群 -->
				<view class="add-group-box fx-center-between">
					<view class="">
						<view class="tip-title">加入「轻钉轻创」官方群</view>
						<view class="tip-desc">创业/副业赚钱更简单</view>
					</view>
					<van-button color="#4078E5" size="small" custom-style="width:120rpx;"
						@click="toChatCode">进群</van-button>
				</view>
				<!-- 话题 -->
				<view class="topic-box">
					<view class="fx-center-between" @click="toHotpic">
						<view class="fx-center topic-title">
							<image src="/static/topic_icon.png" mode="heightFix"></image>
							<view class="">热门话题</view>
						</view>
						<van-icon name="arrow" color="#5C5F66" size="30rpx"></van-icon>
					</view>
					<view class="fx-center-between topic-item" v-for="item in words" :key="item.id"
						@click="toTopicDetail(item.id)" v-if="words.length>0">
						<view class="fx-center">
							<view class="topic-name">#{{item.name}}</view>
							<van-tag color="rgba(24, 102, 254, 0.1)" text-color="#4078E5" size="mini" v-if="item.is_new">
								新
							</van-tag>
							<van-tag color="rgba(255, 92, 0, 0.1)" text-color="#FF5C00" size="mini" v-if="item.is_hot">
								热
							</van-tag>
						</view>
						<view class="topic-num">{{item.user_count}}人参与</view>
					</view>
					<view class="main-no-data" v-else>
						<image src="/static/no_project.png" mode="widthFix"></image>
						<view class="">暂无数据</view>
					</view>
				</view>
				<!-- 创客talk -->
				<view class="bussiness-talk">
					<view class="title">创客Talk</view>
					<view class="talk-list" v-for="(item,index) in topicList" :key="item.id" v-if="topicList.length>0">
						<talk-item :info="item" :showInput="showInput" @refrash="$emit('refrash')"
							@clickAction="$emit('clickAction',$event)" @showEvent="$emit('showEvent',$event)"
							@closeEvent="$emit('closeEvent')"></talk-item>
					</view>
					<view class="main-no-data" v-else>
						<image src="/static/no_project.png" mode="widthFix"></image>
						<view class="">暂无数据</view>
					</view>
				</view>
			</view>
		</view>
	</template>

	<script>
		export default {
			props: {
				topicList: {
					typeof: Array,
					default: () => []
				},
				showInput: {
					typeof: Boolean,
					default: false
				}
			},
			data() {
				return {
					bannerList: [],
					swiperSelect: 0,
					// 排行榜
					rankList: [],
					rank_year: '',
					rank_month: '',
					qrcode: '', //群二维码
					words: [], //热门话题
					guide_link: '', //轻钉新手指南
				}
			},
			methods: {
				initData(info) {
					this.rankList = info.ranks
					this.rank_year = info.rank_year
					this.rank_month = info.rank_month
					this.qrcode = info.qrcode
					this.words = info.words
					this.guide_link = info.guide_link
					info.banners.forEach(item => {
						item.url = item.file_assets.length > 0 ? item.file_assets[0].url : ''
					})
					this.bannerList = info.banners
				},

				// 轮播切换
				changeSwiper(e) {
					this.swiperSelect = e.detail.current
				},
				// 热门话题
				toHotpic() {
					uni.navigateTo({
						url: '/pages/index/hotTopic/hotTopic'
					})
				},
				// 话题详情
				toTopicDetail(id) {
					if (this.$store.state.islogin) {
						uni.navigateTo({
							url: '/pages/index/hotTopic/topicDetail/topicDetail?id=' + id
						})
					} else {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}
				},

				// 新手指南
				toZhiNan() {
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/index/videoPlay/videoPlay?url=' + this.guide_link
						})
					}, 500)
				},
				toChatCode() {
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/index/chatCode/chatCode?img=' + this.qrcode +
								'&title=添加轻钉轻创官方群&type=1'
						})
					}, 500)
				},
				// 全屏改变
				fullscreenchange(e) {
					console.log('eee', e)
				}
			}
		}
	</script>

	<style scoped lang="scss">
		.index-tab1-view {

			.index-bg-color {
				background: linear-gradient(180deg, #FFFFFF 84%, rgba(255, 255, 255, 0) 100%);
				width: 100%;
				height: 800rpx;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				z-index: -1;
			}

			.index-content {
				margin: 0 24rpx;
			}

			.swiper-box {
				position: relative;

				.index-swiper {
					width: 100%;
					height: 224rpx;
					border-radius: 4rpx;
					overflow: hidden;
					margin-top: 20rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 4rpx;
					}
				}

				.swiper-radius {
					position: absolute;
					bottom: 24rpx;
					right: 48rpx;

					view {
						width: 8rpx;
						height: 6rpx;
						background-color: #989696;
						margin: 0 5rpx;
						float: left;
						-webkit-transition: 0.3s;
						transition: 0.3s;
						opacity: 0.5;
						transform: skew(-20deg);
					}

					.dot_select {
						background-color: #fff;
						width: 18rpx;
						opacity: 1;
					}
				}
			}

			.advertise-box {
				margin-top: 16rpx;

				.advertise-item {
					height: 284rpx;
					position: relative;

					image {
						width: 350rpx;
						height: 100%;
					}

					.item-text {
						position: absolute;
						text-align: center;
						top: 72rpx;
						width: 100%;
						text-align: center;

						.month {
							color: #471A00;
							font-size: 22rpx;
							opacity: 0.5;
						}

						.rank-list {
							background: #ffffff;
							border-radius: 4rpx;
							padding: 12rpx 16rpx;
							margin: 14rpx 8rpx 0;

							.rank-item {
								font-size: 24rpx;
								line-height: 46rpx;

								.left-name {
									text {
										font-weight: bold;
										color: #8A8F99;
										margin-right: 8rpx;
									}
								}
							}

							.rank-no-item {
								color: #8A8F99;
								font-size: 24rpx;
							}


						}
					}
				}
			}

			.add-group-box {
				margin-top: 16rpx;
				background: #F0F5FF;
				padding: 22rpx 32rpx 28rpx 24rpx;

				.tip-title {
					font-size: 30rpx;
					font-weight: bold;
					color: #161616;
				}

				.tip-desc {
					color: #5C5F66;
					margin-top: 8rpx;
					font-size: 24rpx;
				}
			}

			.topic-box {
				border-radius: 4rpx;
				padding: 32rpx;
				margin-top: 16rpx;
				background: #ffffff;

				.topic-title {
					color: #161616;
					font-size: 36rpx;
					font-weight: bold;

					image {
						width: 36rpx;
						height: 36rpx;
						margin-right: 16rpx;
					}
				}

				.topic-item {
					margin-top: 32rpx;

					.topic-name {
						color: #161616;
						font-size: 30rpx;
						margin-right: 14rpx;
						max-width: 410rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.topic-num {
						color: #8A8F99;
						font-size: 26rpx;
						flex-shrink: 0;
					}


				}
			}

			.bussiness-talk {
				border-radius: 4rpx;
				padding: 44rpx 32rpx 24rpx;
				margin-top: 16rpx;
				background: #ffffff;

				.title {
					color: #161616;
					font-size: 36rpx;
					font-weight: bold;
				}

				.talk-list {
					margin-top: 48rpx;
					border-bottom: 1px solid #E2E2E2;
				}

				.talk-list:first-child {
					margin-top: 56rpx;
				}

				.talk-list:last-child {
					border: none;
				}
			}


		}
	</style>